<template>
  <div v-if="visible" :style="`width:${width}; height: ${height}`">
    <!-- 级联范围 -->
    <MatterCascader
      :style="`width:${width};`"
      @f_onBizChange="s_onBizChange"
      placeholder="请选择范围"
      :isLazy="true"
      :echoList="echoList"
    ></MatterCascader>
    <!-- 表格区域 -->
    <a-menu class="comword_menu comwordPop" slot="overlay" @click="handleMenuClick">
      <a-menu-item class="comword_menu_item" v-for="(item, index) in menuList" :key="index">
        {{ item.content }}
      </a-menu-item>
    </a-menu>
  </div>
</template>
<script>
import { findtMatteByApplyid } from '../../api/std/std_matter.js'
import MatterCascader from '@/views/base/Std_matterCascader.vue'
import { queryStd_comwordList } from '@/api/std/std_comword.js'
import { Tp_categoryName } from '@/enumeration/Tp_category.js'

export default {
  props: {
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '200px',
    },
    value: {
      type: String,
      default: '',
    },
    applyid: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      visible: false, // 组件显示状态
      echoList: [], // 回显条件
      queryParam: {
        isUse: true, // 是否是在使用中进行查询 (使用中会根据权重 环节 > 事项 > 分类 进行排序)
        sort: 'sortnum',
        order: 'desc',
      }, // 查询条件
      menuList: [], // 可选的常用语菜单
    }
  },
  created() {},
  watch: {
    value(newval) {
      // console.log('输入值', newval)
      this.queryParam.f_content = newval
      this.findStd_comwordList()
    },
  },
  methods: {
    popVisible(status) {
      if (this.visible == false && status) {
        // console.log('分类', this.$route.query.category)
        findtMatteByApplyid(this.applyid).then((res) => {
          // console.log('申请事项', res)
          if (res.code == 0) {
            this.queryParam.f_cateid = res.data.cateid || null
            this.queryParam.f_bizid = res.data.applyid || null
            // 只有自定义标识的流程环节才用来进行查询
            this.queryParam.f_category =
              this.$route.query.category in Tp_categoryName ? this.$route.query.category : null

            // 使用中的排序字段依据赋值
            this.queryParam.usecateid = this.queryParam.f_cateid
            this.queryParam.usebizid = this.queryParam.f_bizid
            this.queryParam.usecategory = this.queryParam.f_category
            this.findStd_comwordList()
            // 常用语默认回显当前事项的常用语记录
            this.echoList.push(this.queryParam.f_cateid)
            this.echoList.push(this.queryParam.f_bizid)
            this.echoList.push(this.queryParam.f_category)
          }
          // console.log('初始化回显', this.echoList)
        })
      }
      this.visible = status
      
    },
    // 选中的项
    handleMenuClick(value) {
      console.log('常用语回显值', value, this.menuList[value.key].content)
      this.$emit('f_popGetValue', this.menuList[value.key].content)
      this.popVisible(false)
    },
    // 级联触发
    s_onBizChange(value) {
      // console.log('常用语范围', value)
      this.queryParam.f_cateid = value[0] == 'all' ? null : value[0]
      this.queryParam.f_bizid = value[1] == 'all' ? null : value[1]
      this.queryParam.f_category = value[2] == 'all' ? null : value[2]
      this.findStd_comwordList()
    },
    /**
     *  查询常用语列表
     */
    findStd_comwordList() {
      queryStd_comwordList(this.queryParam).then((res) => {
        // console.log('常用语表格数据', res.data)
        if (res.code == 0) {
          this.menuList = res.data.records || []
        }
      })
    },
  },
  components: {
    MatterCascader,
  },
}
</script>

<style lang="less" scoped>
.comword_menu_item {
  // border: 1px solid red;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.comwordPop {
  width: 100%;
  // border: 1px solid #fff;
  border: 1px solid rgb(160, 219, 247);
  background-color: #fff;
  border-radius: 5px;
  z-index: 9999 !important;
  height: 200px;
  overflow: auto;
}
.comword_menu {
  z-index: 99999 !important;
}
</style>

